<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/loading.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
	</head>
	<style>
		.box {
			/*width: 397px;*/
			height: 300px;
			/*margin: 30px auto;*/
			position: absolute;
			top: 47%;
			left: 50%;
			color: #FFFFFF;
		}
		
		.ps {
			position: absolute;
			top: 5%;
			left: -460%;
		}
		
		.ok {
			width: 20px;
			height: 100px;
			margin: 0 auto;
			text-align: center;
			background: #999;
			line-height: 100px;
			color: #FFF;
			display: none;
		}
		
		.tbox {
			width: 20px;
			height: 49px;
			background: url(bak.png) no-repeat;
			/*margin-top: 20px;*/
		}
		
		.tbox div {
			width: 0px;
			height: 49px;
			background: url(pro.png) no-repeat;
			text-align: center;
			font-family: Tahoma;
			font-size: 18px;
			line-height: 48px;
		}
		
		.tiao {
			width: 10%;
		}
	</style>

	<body>
		<div class="box">

			<div class="ok"></div>

			<div class="tbox">

				<div class="tiao"></div>

			</div>
			<div class="ps">
				<p>LOADING...</p>
			</div>

		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="UTF-8"></script>
		<script>
			var i = 0;
			/*add——创建tbx下的div加文字和变宽度的方法*/

			function add(i) {
				var tbox = $(".tbox");
				var tiao = $(".tiao");
				tiao.css("width", i + "%").html(i + "%");
			}
			/*创建方法（i++循环起来）*/

			function xh() {

				if(i > 100) {

					window.location.href = ("jiangp.html");
					//			return;
				}
				if(i <= 100) {
					setTimeout("xh()", 100)
					add(i);
					i = i + 2;
				}
			}

			/*调用xh()函数*/

			$(document).ready(function() {

				xh();

			});
		</script>
	</body>

</html>